<template>
  <div>
    <div class="title hover-hand">
      <h2>推荐歌单</h2>
    </div>
    <div class="main">
      <div class='item' 
        v-for="(item,index) in recommendMusicList" 
        :key="item.id" 
        @mouseover="showPlay(index)" 
        @mouseout="ind = -1"
        @click="musicListClick('/musiclistdetail',item.id)">
        <div class="itemMain hover-hand">
          <div class="culm">
            <!-- 上方遮罩层 -->
            <i class="iconfont">&#xe601;</i>
             {{item.playCount}}
          </div>
          <!-- 播放按钮 -->
          <transition name="slide-fade">
            <div class="play hover-hand" v-show="index === ind">
            <div class="trangle"></div>
          </div>
          </transition>
          <!-- 歌单封面图片 -->
          <img :src="item.picUrl" alt="">
        </div>
        <!-- 歌单标题 -->
        <div class="itemTitle yahei hover-hand">
          {{item.name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'recommendMusicList',
  props:{
    recommendMusicList:Array
  },
  data() {
    return {
      ind:-1
    }
  },
  methods: {
    showPlay(index){
      this.ind = index
    },
    musicListClick(path,id){
      this.$router.push({
        path,
        query:{
          id
        }
      })
      // console.log(this.recommendMusicList);
    }
  },
}
</script>

<style lang='less' scoped>
@import url('~assets/css/animate.css');
.main {
  margin-top: .125rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    margin-bottom: .125rem;
    width: 1.5rem;
    .itemMain {
      position: relative;
      width: 1.5rem;
      height: 1.5rem;
      overflow: hidden;
      border-radius: .066667rem;
      .culm {
        position: absolute;
        height: .208333rem;
        width: 100%;
        background: rgba(5, 5, 5, .6);
        text-align: center;
        line-height: .208333rem;
        color: white;
      }
      
      img {
        width: 100%;
        height: 100%;
      }
    }
    .itemTitle {
      height: .25rem;
      font-size: .125rem;
    }
  }
}
.itemMain .play {
        position: absolute;
        left: .041667rem;
        bottom: .041667rem;
        width: .25rem;
        height: .25rem;
        border-radius: 50%;
        background: rgba(247, 244, 244, 0.8);
        .trangle {
          position: absolute;
          left: .075rem;
          top: .066667rem;
          width: 0;
          height: 0;
          border-top: .058333rem solid transparent;
          border-left: .125rem solid red;
          border-bottom: .058333rem solid transparent;
        }
      }
</style>